Form Element Dropdown

This guide will illustrate how to use the Form Element Dropdown with a JSON Form. A Dropdown can be either static or dynamic. A Dynamic Dropdown can utilize either a JSON Transformation Schema (JST) or a Source-to-Target configuration for data mapping. Both types will be covered in this guide as well as their respective data parsing methods.

Configuring Dropdown Form Elements

1. Go to IAP → Automation Studio → JSON Forms.

2. Select an existing JSON Form from the menu list on the left or create a new JSON Form by clicking on the plus sign (+) icon.

   Figure 1: Create New JSON Form

   

3. Drag the Dropdown element over to the empty box on the canvas.

   Figure 2: Add Dropdown Form Element

   

4. Hover over the three dots in the upper-right corner. Click the gear icon when it appears to edit the Dropdown. The Configure dialog displays.

   Figure 3: Edit Dropdown Form Element

   

5. In the Configure dialog, enter a name in the Label field (required), make other selections as needed, and then click Options (lower-left) to open the configuration window for dropdown options.

   Figure 4: Configure Dropdown Form Element

   

Static Dropdown

To configure a Static Dropdown option:

1. Select Static and click the Option button to add as many fields as needed. Enter values for each line and click Back when finished. Use the trashcan icon at the end of each line to remove an unwanted option.

   Figure 5: Select Static Option

   

2. Click Save to retain your changes. You will return to the JSON Form canvas.

   Figure 6: Save Static Dropdown Changes

   

3. Click the Static dropdown arrow to access the list of items that were created in the previous steps.

   Figure 7: View Static Dropdown List

   

Dynamic Dropdown

To configure a Dynamic Dropdown:

1. Repeat configuration steps 4 and 5 presented in the previous section.

2. Select the Dynamic option instead of Static.

   Figure 8: Select Dynamic Option

   

3. Make Request Configuration selections for the following fields:

   • Method
   • Base URL
   • API Route

   ⚠ Note: For more information, see the Using JSON Forms guide.

4. Click the Make API Call button.

   Figure 9: Request Configuration Fields

   

5. The output of the API call will appear in the Response Body.

   Figure 10: API Response

   

6. The results may be filtered by selecting the Source-To-Target option under Data Mapping. Enter the required information for the Source Property and Property Key fields. In the example below (Figure 11) the Source Property is /results and the Property Key is /id.

   Figure 11: Source-To-Target

   

7. Click the Query Data button to display the results.

   Figure 12: Target Data Preview

   

8. The second filtering option is JSON Transformation. Select the JSON Transformation radio button.

   Figure 13: JSON Transformation

   

9. Select a JST from the dropdown list.

   Figure 14: Select JST from List

   

10. Once the JST is selected, click the Run Transformation button.

    Figure 15: Run Transformation

    

11. The data is parsed based on the JST. In this example (Figure 16), the returned value is the id field.

    Figure 16: Results for ID

    

    ⚠ Note: In the event the Run Transformation button is unavailable (not enabled), make sure to run the JST before using it in a JSON Form.